<template>
	<view class="content">
		<view>
			总共{{problemItem.length}}题
			<problem-list :title="title"></problem-list>
			<view class="buttons">
				<u-button type="info" @click="preview()"><u-icon name="arrow-left" color="#2979ff" size="28"></u-icon>上一题</u-button>
				<u-button type="info" @click="next()">下一题<u-icon name="arrow-right" color="#2979ff" size="28"></u-icon></u-button>
				<u-button type="primary" @click="next()">查看结果</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import problemList from './problemList.vue'
	export default {
		data() {
			return {
				problemItem: [{
						title: "1",
						isAnswer: false,
						descriptor: "A or B or C",
						radio: true,
						candicated: [{
							name: "A",
							checked: false
						},{
							name: "B",
							checked: false
						},{
							name: "C",
							checked: false
						}, ],
						answer: "A",
						studentanser: "123"
					},
					{
						title: "2",
						isAnswer: false,
						descriptor: "A or B or C",
						radio: false,
						candicated: [{
							name: "A",
							checked: false
						},{
							name: "B",
							checked: false
						},{
							name: "C",
							checked: false
						}, ],
						answer: "B",
						studentanser: "123"
					},
					{
						title: "3",
						isAnswer: true,
						descriptor: "A or B or C",
						radio: true,
						candicated: [{
							name: "A",
							checked: false
						},{
							name: "B",
							checked: false
						},{
							name: "C",
							checked: false
						}, ],
						answer: "C",
						studentanser: ""
					}, {
						title: "4",
						descriptor: "A or B or C",
						radio: true,
						candicated: [{
							name: "A",
							checked: false
						},{
							name: "B",
							checked: false
						},{
							name: "C",
							checked: false
						}, ],
						answer: "B",
						studentanser: ""
					},
				],
				title: {
					title: "1",
					isAnswer: false,
					descriptor: "A or B or C",
					radio: true,
					candicated: [{
						name: "A",
						checked: false
					},{
						name: "B",
						checked: false
					},{
						name: "C",
						checked: false
					}, ],
					answer: "A",
					studentanser: ""
				},
				currentIndex: 0
			}
		},
		methods: {
			preview() {
				this.currentIndex = this.currentIndex - 1;
				if (this.currentIndex < 0) {
					this.currentIndex = 0;
					this.title = this.problemItem[this.currentIndex];
				}
			},
			next() {
				this.currentIndex = this.currentIndex + 1;
				this.currentIndex = this.currentIndex % this.problemItem.length;
				this.title = this.problemItem[this.currentIndex];
			}
		},
		components: {
			problemList
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
	}

	.buttons {
		display: flex;
		flex-direction: row;
	}

	.custom-style {
		color: #606266;
		width: 400rpx;
	}
</style>
